<template>
    <div>
        <!--购物车列表-->
        <div class="mui-card" v-for="item in goodsList" :key="item.id">
            <div class="mui-card-content" >
                <!--下面这种方法不可以，由于v-model是双向绑定的，意味着这里写的是一个变量名，而不是一个实际的值
                    测试完发现，v-model 如果是传的一个固定的id 87 去调用getter方法不会报错，如果传的是一个变量，那么会报错

                    得：
                        老老实实先获取数组[{id:是否选中}],再通过id来取
                -->
                <mt-switch v-model="$store.getters.allSelectd[item.id]" @change="changeSelect(item.id)"></mt-switch>
<!--
                <mt-switch v-model="$store.getters.isSelected(item.id);"></mt-switch>
-->
                <!--<mt-switch v-model="flag"></mt-switch>-->
                <!--<mt-switch v-model="$store.getters.isSelected(87)"></mt-switch>-->
               <!-- {{ $store.getters.isSelected(87) }}
                {{ $store.getters.isSelected(item.id) }}-->
                <img :src="item.thumb_path">

                <div class="detail">
                    <h3 class="title">{{ item.title }}</h3>
                    <div>
                        <span class="red">￥ {{item.sell_price }}</span>
                        <!--数量输入栏-->
                        <number :currentnum="$store.getters.getCurrentTotalById(item.id)" :currentid="item.id"></number>
                        <a @click.prevent="delGoods(item.id)">删除</a>
                    </div>
                </div>
            </div>
        </div>

        <!--结算栏-->
        <div class="mui-card">
            <div class="mui-card-content split-div">
                <div class="content-class">
                    总计（不含运费）<br>
                    <span>已勾选商品<span class="red">{{ $store.getters.getSelectedObj.totalNum }}</span>件，
                        总价：<span class="red">￥{{ $store.getters.getSelectedObj.totalMoney }}</span></span>
                </div>

                <mt-button size="small" type="danger">去结算</mt-button>
            </div>
        </div>
    </div>
</template>

<script>

    import number from "../../components/subcomponents/NumberInput_Car.vue"

    export default {
        data(){
            return {
                //保存根据id返回的商品信息
                goodsList:[],
                // flag:true,
            }
        },
        created(){
            this.getAllGoodsList();
        },
        methods:{

            getAllGoodsList(){
                //感觉这些数据都可以放在本地
                var idArr = [];
                //获取vuex中的购物车id和数量
                this.$store.state.car.forEach(item=>{
                    idArr.push(item.id);
                });
                if(idArr.length === 0){
                    return;
                }

                //拼接id，调用接口获取商品属性
                this.$http.get("api/goods/getshopcarlist/"+idArr.join(",")).then(result=>{
                    if(result.body.status === 0){
                        this.goodsList = result.body.message;
                    }
                })

                //把vuex中的数量回写到接口返回的对象中


                //页面中需要展示出来的，
                //本地中就有：是否勾选，数量，单价
                //接口获取：图片，标题

                //已勾选数量和总价可通过js计算出来
            },

            //更新当前商品是否要勾选
            changeSelect(id){
                //由于这个案例中，是否选中也是存在本地的，所以还是要通过mutations去更改当前商品是否选中
                this.$store.commit("updateGoodsIsSelected",id)
            },

            //删除当前商品
            delGoods(id){
                //原因同上
                this.$store.commit("delGoods",id);
                //删除之后更新本地数据，并重新调用接口获取数据
                this.getAllGoodsList();
            }
        },
        components:{
            number
        }
    }
</script>

<style scoped>
    .mui-card-content{
        display: flex;
    }

    img{
        margin-left: 10px;
        width: 60px;
        height: 60px;
    }

    .title{
        font-size: 14px;
    }

    .detail{
        margin-left: 10px;
    }

    .red{
        color: red;
        font-weight: bold;
    }

    .content-class{
        font-size: 14px;
    }

    .split-div{
        justify-content: space-between;
        padding: 10px;
    }

</style>